<template>
	<view>
		<view class="" >
		<!-- 搜索框 -->
		    <view class="weui-search-bar__box weui-search-bar__form"style="width: 90%;" >
				<icon class="weui-icon-search_in-box1 " type="search" size="14"></icon>
		        <input type="text" class="weui-search-bar__input " style="left: 2rpx;" placeholder="请输入搜索内容" @input="oninput"/>	
		    </view>
			<view  @click="button1()">
				<text class="weui-icon-search_in-box iconfont icon-sousuo" size="14"  ></text>
			</view>
		</view>
		<template v-if="searchList.length===0">
				<!-- 搜索历史 -->
			<view  class="py-2 font-md px-2">
				搜索历史
			</view>
			<view class="flex flex-wrap">
				<view class=" border rounded font mx-2 my-1 px-2  " v-for="(item,index) in list" hover-class="bg-light" @click="clickSearchHistory(item)">{{item}}</view>
			</view>
		</template>
		<template v-else>
			<!-- 数据列表 -->
		<block v-for="(item,index) in searchList" :key="index">
			<template v-if="type==='post'">
				<!-- 帖子 -->
			<common-list :item="item" :index="index"></common-list>
			</template>
			<template v-else-if="type==='topic'">
				<!-- 话题 -->
			<topic-list :item="item" :index="index"></topic-list>
			</template>
			<template v-else>
				<!-- 用户 --> 
			<user-list :item="item" :index="index"></user-list>
			</template>
			
		</block>
		</template>
		
	</view>
</template>

<script>
	//测试数据
	const demo1=[{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/12.jpg",
									support:{
										type:"unsupport",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"",
									support:{
										type:"support",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/15.jpg",
									support:{
										type:"",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/13.jpg",
									support:{
										type:"support",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								}]
	const demo2=[{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				}]
	const demo3=[{
									avatar:"/static/tabber/default.jpg",
									username:"昵称",
									sex:1,
									age:24,
									isFollow:true
								},
								{
									avatar:"/static/tabber/default.jpg",
									username:"昵称",
									sex:2,
									age:24,
									isFollow:false
	}]
	import commonList from '@/components/common/common-list.vue';
	import topicList from '@/components/news/topic-list.vue';
	import userList from '@/components/user-list/user-list.vue';
	export default {
		components:{
			commonList,
			topicList,
			userList
		},
		data() {
			return {
				searchText:"",
				list:['uni-app第二季商城类','uni-app第三季','实战教程','系列教程'],
				searchList:[],
				//当前搜索类型
				type:"post"
			}
		},
		onLoad(e){
			if(e.type){
				this.type=e.type
			}
			let pageTitle = '帖子'
			switch (this.type){
				case 'post':
				pageTitle = '帖子'
					break;
				case 'topic':
				pageTitle = '话题'
					break;
				case 'user':
				pageTitle = '用户'
					break;
			}
			//修改搜索占位
			// #ifdef APP-PLUS
			let currentWebview = this.$mp.page.$getAppWebview();
			let tn = currentWebview.getStyle().titleNView;
			tn.searchInput.placeholder = '搜索'+pageTitle; 
			currentWebview.setStyle({
				titleNView: tn  
			})
			// #endif
		},
		methods: {
			//点击搜索历史
			clickSearchHistory(text){
				this.searchText=text
				this.searchEvent()
			},
			//监听导航输入
			oninput(e)
			{
				this.searchText=e.detail.value
			},
			//点击搜索
			button1(e)
			{
				this.searchEvent()
			},
			//搜索事件
			searchEvent(){
				//收起键盘
				uni.hideKeyboard()
				//处于loading状态
				uni.showLoading({
					title:'加载中...',
					mask:false
				})
				//请求搜索
				setTimeout(()=>{
					switch(this.type){
						case'post':
						this.searchList=demo1
						break;
						case'topic':
						this.searchList=demo2
						break;
						case'user':
						this.searchList=demo3
						break;
					}
					//隐藏loading
					uni.hideLoading()
				},1000)
				
			}
			
		}
	}
</script>

<style>
.weui-search-bar {
	  position: relative;
	  padding: 8px 10px;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  box-sizing: border-box;
	  background-color: #EFEFF4;
	  border-top: 1rpx solid #D7D6DC;
	  border-bottom: 1rpx solid #D7D6DC;
	}
	.weui-icon-search_in-box {
	  position: absolute;
	  right: 11px;
	  top: 7px;
	}
	.weui-search-bar__form {
	  position: relative;
	  -webkit-box-flex: 1;
	  -webkit-flex: auto;
	          flex: auto;
	  border-radius: 5px;
	  background: #FFFFFF;
	  border: 1rpx solid #E6E6EA;
	}
	.weui-search-bar__box {
	  position: relative;
	  padding-left: 30px;
	  padding-right: 30px;
	  width: 100%;
	  box-sizing: border-box;
	  z-index: 1;
	}
	.weui-icon-search_in-box1{
		position: absolute;
		left: 11px;
		top: 7px;
	}
	.weui-search-bar__input {
	  height: 28px;
	  line-height: 28px;
	  font-size: 14px;
	  left: 5rpx;
	}
	.weui-search-bar__cancel-btn {
	  margin-left: 10px;
	  line-height: 28px;
	  color: #1296db;
	  white-space: nowrap;
	}
	
</style>
